<template>
  <div class="ja-container">
    <div class="textarea-con" :class="{'validate-err': errors.has('dispositionAndReward')}">
      <label data-content="何时、何地受何奖励、处分*">何时、何地受何奖励、处分*&nbsp;&nbsp;&nbsp;<span class="lg-promp">不超过600字</span></label>
      <textarea rows="3" class="width-full" v-model="info.dispositionAndReward" v-validate="'required|max:600'" name="dispositionAndReward"></textarea>
    </div>
    <div class="textarea-con" :class="{'validate-err': errors.has('foreignLanguageAbility')}">
      <label data-content="懂何种外、语程度如何*">懂何种外、语程度如何*&nbsp;&nbsp;&nbsp;<span class="lg-promp">不超过100字</span></label>
      <textarea rows="3" class="width-full" v-model="info.foreignLanguageAbility" v-validate="'required|max:100'" name="foreignLanguageAbility"></textarea>
    </div>
    <div class="textarea-con" :class="{'validate-err': errors.has('workExperience')}">
      <label data-content="主要测绘工作经历*">主要测绘工作经历*&nbsp;&nbsp;&nbsp;<span class="lg-promp">不超过600字</span></label>
      <textarea rows="3" class="width-full" v-model="info.workExperience" v-validate="'required|max:600'" name="workExperience"></textarea>
    </div>
    <div class="textarea-con" :class="{'validate-err': errors.has('expertiseAchievement')}">
      <label data-content="专业技术工作的主要成就*">专业技术工作的主要成就*&nbsp;&nbsp;&nbsp;<span class="lg-promp">不超过600字</span></label>
      <textarea rows="3" class="width-full" v-model="info.expertiseAchievement" v-validate="'required|max:600'" name="expertiseAchievement"></textarea>
    </div>
    <!-- 上传附件 -->
    <div class="flex-row vip-upload" :class="{'validate-err': errors.has('attachment')}">
      <label data-content="上传附件" class="ewai" >上传技术报告相关附件</label>
      <file-upload
        ref="upload"
        v-model="info.attachment"
        v-validate="'required|fileupload'"
        name="attachment"
        :multiple="true"
      >
        <el-button slot="trigger" class="width-200">选取文件</el-button>
        <span slot="tip" class="el-upload__tip">
          附件提示：请上传技术报告等相关材料,最多上传8个文件，每个不超过15M,</span>
      </file-upload>
    </div>
  </div>
</template>

<script>
  export default {
    title: '其他信息',
    name: 'other-info',
    props: {
      otherinfo: {}
    },
    data () {
      return {
        info: {}
      }
    },
    methods: {
      validate () {
        return this.$validator.validateAll()
      },
      clearFiles () {
        this.$refs.upload.clearFiles()
      }
    },
    mounted () {
      this.info = Object.assign({}, this.otherinfo)
    },
    watch: {
      'info': {
        handler: function (val, oldVal) {
          this.$emit('update:otherinfo', this.info)
        },
        deep: true
      }
    },
  }
</script>
